<template>
  <div>
    <div>
      <table>
        <tr>
          <td>
            <p>显示模式：</p>
          </td>
          <td :style="{ width: '200px' }">
            <el-select v-model="hearderData.layoutType" @change="layoutTypeChange">
              <el-option label="一列" value="oneRow" />
              <el-option label="二列" value="twoRow" />
              <el-option label="三列" value="threeRow" />
              <el-option label="四列" value="fourRow" />
            </el-select>
          </td>
          <td>
            <p>一列：</p>
          </td>
          <td>
            <el-input-number v-model="hearderData.oneRows" :min="1" :max="100" @change="numInputBlur" />
          </td>
          <td
            v-if="
              hearderData.layoutType == 'twoRow' || hearderData.layoutType == 'threeRow' || hearderData.layoutType == 'fourRow'
            "
          >
            <p>二列（默认模式）：</p>
          </td>
          <td
            v-if="
              hearderData.layoutType == 'twoRow' || hearderData.layoutType == 'threeRow' || hearderData.layoutType == 'fourRow'
            "
          >
            <el-input-number v-model="hearderData.twoRows" :min="1" :max="100" @change="numInputBlur" />
          </td>
          <td v-if="hearderData.layoutType == 'threeRow' || hearderData.layoutType == 'fourRow'">
            <p>三列：</p>
          </td>
          <td v-if="hearderData.layoutType == 'threeRow' || hearderData.layoutType == 'fourRow'">
            <el-input-number v-model="hearderData.threeRows" :min="1" :max="100" @change="numInputBlur" />
          </td>
          <td v-if="hearderData.layoutType == 'fourRow'">
            <p>四列：</p>
          </td>
          <td v-if="hearderData.layoutType == 'fourRow'">
            <el-input-number v-model="hearderData.fourRows" :min="1" :max="100" @change="numInputBlur" />
          </td>
          <td v-if="residue > 0">
            <p class="red-text">剩余{{ residue }}</p>
          </td>
          <td v-if="residue < 0">
            <p class="red-text">已超出{{ residue }}</p>
          </td>
          <td>
            <el-button type="primary" link @click="clickRowsWidthBtn">保存</el-button>
          </td>
          <td>
            <p>视图类型：</p>
          </td>
          <td :style="{ width: '200px' }">
            <el-select v-model="hearderData.selId" @change="selIdChange">
              <el-option label="常用视图" value="static_all" />
              <el-option label="过滤视图" value="filter_all" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请求过滤器" value="filter_request" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;问题过滤器" value="filter_problem" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;变更过滤器" value="filter_change" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;配置项过滤器" value="filter_ci" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识库过滤器" value="filter_knowledge" />
              <el-option label="报表视图" value="report_all" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单项分组统计报表" value="report_singleGroup" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多项分组统计报表" value="report_mutilGroup" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KPI统计报表" value="report_KPI" />
              <el-option label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交叉报表" value="report_cross" />
              <el-option label="配置项快捷检索" value="ci_select" />
            </el-select>
          </td>
        </tr>
      </table>
    </div>
    <div class="card content-box">
      <el-row>
        <el-col :span="18" :style="{ width: '1200px' }">
          <el-row>
            <el-col :span="5" class="row-border">
              <draggable
                :list="state.modules.group1"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onStart"
                @end="onEnd"
                group="group1"
                :fallback-class="true"
                :fallback-on-body="true"
                :touch-start-threshold="50"
                :fallback-tolerance="50"
                :move="onMove"
              >
                <template #item="{ element }">
                  <div :class="element.disabledMove ? 'forbid item' : 'item'">
                    <!-- <label class="move">{{ element.name }}</label> -->
                    <label class="move">{{
                      element.viewName != undefined
                        ? element.viewName
                        : element.reportName != undefined
                          ? element.reportName
                          : element.filterName
                    }}</label>
                    <p>
                      {{
                        element.viewType == "staticView"
                          ? "静态视图"
                          : element.viewType == "singleView"
                            ? "报表视图"
                            : element.viewType == "filterView"
                              ? "过滤视图"
                              : element.filterName != ""
                                ? "过滤视图"
                                : element.reportName != ""
                                  ? "报表视图"
                                  : ""
                      }}
                    </p>
                    <el-button type="primary" link @click="deleteObj(element, 'group1')">删除</el-button>
                  </div>
                </template>
              </draggable>
            </el-col>
            <el-col
              :span="5"
              :style="{ width: '200px' }"
              class="row-border"
              v-if="
                hearderData.layoutType == 'twoRow' || hearderData.layoutType == 'threeRow' || hearderData.layoutType == 'fourRow'
              "
            >
              <draggable
                :list="state.modules.group2"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onStart"
                @end="onEnd"
                group="group1"
                :fallback-class="true"
                :fallback-on-body="true"
                :touch-start-threshold="50"
                :fallback-tolerance="50"
                :move="onMove"
              >
                <template #item="{ element }">
                  <div :class="element.disabledMove ? 'forbid item' : 'item'">
                    <!-- <label class="move">{{ element.name }}</label> -->
                    <label class="move">{{
                      element.viewName != undefined
                        ? element.viewName
                        : element.reportName != undefined
                          ? element.reportName
                          : element.filterName
                    }}</label>
                    <p>
                      {{
                        element.viewType == "staticView"
                          ? "静态视图"
                          : element.viewType == "singleView"
                            ? "报表视图"
                            : element.viewType == "filterView"
                              ? "过滤视图"
                              : element.filterName != ""
                                ? "过滤视图"
                                : element.reportName != ""
                                  ? "报表视图"
                                  : ""
                      }}
                    </p>
                    <el-button type="primary" link @click="deleteObj(element, 'group2')">删除</el-button>
                  </div>
                </template>
              </draggable>
            </el-col>
            <el-col
              :span="5"
              :style="{ width: '200px' }"
              class="row-border"
              v-if="hearderData.layoutType == 'threeRow' || hearderData.layoutType == 'fourRow'"
            >
              <draggable
                :list="state.modules.group3"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onStart"
                @end="onEnd"
                group="group1"
                :fallback-class="true"
                :fallback-on-body="true"
                :touch-start-threshold="50"
                :fallback-tolerance="50"
                :move="onMove"
              >
                <template #item="{ element }">
                  <div :class="element.disabledMove ? 'forbid item' : 'item'">
                    <!-- <label class="move">{{ element.name }}</label> -->
                    <label class="move">{{
                      element.viewName != undefined
                        ? element.viewName
                        : element.reportName != undefined
                          ? element.reportName
                          : element.filterName
                    }}</label>
                    <p>
                      {{
                        element.viewType == "staticView"
                          ? "静态视图"
                          : element.viewType == "singleView"
                            ? "报表视图"
                            : element.viewType == "filterView"
                              ? "过滤视图"
                              : element.filterName != ""
                                ? "过滤视图"
                                : element.reportName != ""
                                  ? "报表视图"
                                  : ""
                      }}
                    </p>
                    <el-button type="primary" link @click="deleteObj(element, 'group3')">删除</el-button>
                  </div>
                </template>
              </draggable>
            </el-col>
            <el-col :span="5" :style="{ width: '200px' }" class="row-border" v-if="hearderData.layoutType == 'fourRow'">
              <draggable
                :list="state.modules.group4"
                ghost-class="ghost"
                handle=".move"
                filter=".forbid"
                :force-fallback="true"
                chosen-class="chosenClass"
                animation="300"
                @start="onStart"
                @end="onEnd"
                group="group1"
                :fallback-class="true"
                :fallback-on-body="true"
                :touch-start-threshold="50"
                :fallback-tolerance="50"
                :move="onMove"
              >
                <template #item="{ element }">
                  <div :class="element.disabledMove ? 'forbid item' : 'item'">
                    <!-- <label class="move">{{ element.name }}</label> -->
                    <label class="move">{{
                      element.viewName != undefined
                        ? element.viewName
                        : element.reportName != undefined
                          ? element.reportName
                          : element.filterName
                    }}</label>
                    <p>
                      {{
                        element.viewType == "staticView"
                          ? "静态视图"
                          : element.viewType == "singleView"
                            ? "报表视图"
                            : element.viewType == "filterView"
                              ? "过滤视图"
                              : element.filterName != ""
                                ? "过滤视图"
                                : element.reportName != ""
                                  ? "报表视图"
                                  : ""
                      }}
                    </p>
                    <el-button type="primary" link @click="deleteObj(element, 'group4')">删除</el-button>
                  </div>
                </template>
              </draggable>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3" :style="{ width: '400px' }">
          <draggable
            :list="state.modules.public"
            ghost-class="ghost"
            handle=".move"
            filter=".forbid"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onStart"
            @end="onEnd"
            group="group1"
            :fallback-class="true"
            :fallback-on-body="true"
            :touch-start-threshold="50"
            :fallback-tolerance="50"
            :move="onMove"
          >
            <template #item="{ element }">
              <div :class="element.disabledMove ? 'forbid item' : 'item'">
                <label class="move">{{
                  element.viewName != undefined
                    ? element.viewName
                    : element.reportName != undefined
                      ? element.reportName
                      : element.filterName
                }}</label>
                <p>
                  {{
                    element.viewType == "staticView"
                      ? "静态视图"
                      : element.viewType == "singleView"
                        ? "报表视图"
                        : element.viewType == "filterView"
                          ? "过滤视图"
                          : element.filterName != ""
                            ? "过滤视图"
                            : element.reportName != ""
                              ? "报表视图"
                              : ""
                  }}
                </p>
              </div>
            </template>
          </draggable>
        </el-col>
        <el-col :span="3" :style="{ width: '400px' }">
          <draggable
            :list="state.modules.public2"
            ghost-class="ghost"
            handle=".move"
            filter=".forbid"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            @start="onStart"
            @end="onEnd"
            group="group1"
            :fallback-class="true"
            :fallback-on-body="true"
            :touch-start-threshold="50"
            :fallback-tolerance="50"
            :move="onMove"
          >
            <template #item="{ element }">
              <div :class="element.disabledMove ? 'forbid item' : 'item'">
                <label class="move">{{
                  element.viewName != undefined
                    ? element.viewName
                    : element.reportName != undefined
                      ? element.reportName
                      : element.filterName
                }}</label>
                <p>
                  {{
                    element.viewType == "staticView"
                      ? "静态视图"
                      : element.viewType == "singleView"
                        ? "报表视图"
                        : element.viewType == "filterView"
                          ? "过滤视图"
                          : element.filterName != ""
                            ? "过滤视图"
                            : element.reportName != ""
                              ? "报表视图"
                              : ""
                  }}
                </p>
              </div>
            </template>
          </draggable>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
//导入draggable组件
import draggable from "vuedraggable";
import {
  findallViewAndUserViewTwo,
  findAllSystemView,
  findCustomFilter,
  updateRowsWidth,
  updateUserCustomView,
  findBaseReport,
  sgreportFindPager,
  mutilreportFindPager,
  kpireportFindPager,
  crossreportFindPager
} from "@/api/modules/systemTools";
import { getCurrentLoginUser } from "@/api/modules/accessController";
import { ElMessage, ElMessageBox } from "element-plus";

onMounted(() => {
  loadData();
});
const loadData = () => {
  state.modules.group1 = [];
  state.modules.group2 = [];
  state.modules.group3 = [];
  state.modules.group4 = [];
  state.modules.public = [];
  state.modules.public2 = [];
  hearderData.value.selId = "static_all";
  getCurrentLoginUser().then(res => {
    let newParams = JSON.parse(JSON.stringify(res));
    hearderData.value.loginName = newParams.loginName;
    findallViewAndUserViewTwo(newParams.loginName).then(viewRes => {
      let newViewRes = JSON.parse(JSON.stringify(viewRes));
      let chars = newViewRes.viewRowsStr.split(":");
      for (let i = 0; i < newViewRes.viewdtos.length; i++) {
        if (chars[i] == "1") {
          state.modules.group1.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "2") {
          state.modules.group2.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "3") {
          state.modules.group3.push(newViewRes.viewdtos[i]);
        } else if (chars[i] == "4") {
          state.modules.group4.push(newViewRes.viewdtos[i]);
        } else {
        }
      }
      hearderData.value.layoutType = newViewRes.layoutType;
      hearderData.value.oneRows = newViewRes.rowsWidth.oneRows;
      hearderData.value.twoRows = newViewRes.rowsWidth.twoRows;
      hearderData.value.threeRows = newViewRes.rowsWidth.threeRows;
      hearderData.value.fourRows = newViewRes.rowsWidth.fourRows;
      hearderData.value.customType = newViewRes.customType;

      findAllSystemView().then(allRes => {
        let newallRes = JSON.parse(JSON.stringify(allRes));
        for (let i = 0; i < newallRes.length; i++) {
          let add = true;
          state.modules.group1.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              console.log("已存在：过滤");
              console.log(item.viewName);
              add = false;
            }
          });
          state.modules.group2.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          state.modules.group3.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          state.modules.group4.forEach(item => {
            if (item.viewId == newallRes[i].viewId) {
              add = false;
            }
          });
          if (add == true) {
            if (state.modules.public.length > state.modules.public2.length) {
              state.modules.public2.push(newallRes[i]);
            } else {
              state.modules.public.push(newallRes[i]);
            }
          }
        }
      });
      //  	findCustomFilter(newParams.loginName,"").then(res=>{
      // 	res[0]["viewId"]=res[0].filterId
      // 	res[0]["viewName"]=res[0].filterName
      // 	res[0]["viewCode"]="filterView_" + res[0].filterId
      // 	state.modules.group1.push(res[0])
      // 	console.log(res)
      // })
    });
  });
};
const residue = ref(0);
const numInputBlur = (data: any) => {
  console.log("ss");
  let tresidue =
    100 - hearderData.value.oneRows - hearderData.value.twoRows - hearderData.value.threeRows - hearderData.value.fourRows;
  residue.value = tresidue;
  console.log(residue);
};
const clickRowsWidthBtn = (data: any) => {
  let tresidue =
    100 - hearderData.value.oneRows - hearderData.value.twoRows - hearderData.value.threeRows - hearderData.value.fourRows;
  if (tresidue < 0 || tresidue > 20) {
    ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
    return;
  }
  if (hearderData.value.layoutType == "oneRow") {
    updateRowsWidth(hearderData.value, "rowsWidth").then(res => {
      console.log("保存成功");
      console.log(res);
      let tmpviewIdStr = "";
      let tmpviewRowsStr = "";
      state.modules.group1.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "1:";
      });
      state.modules.group2.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "1:";
      });
      state.modules.group3.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "1:";
      });
      state.modules.group4.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "1:";
      });
      let tmp = {
        loginName: hearderData.value.loginName,
        layoutType: hearderData.value.layoutType,
        viewIdStr: tmpviewIdStr,
        customType: hearderData.value.customType,
        viewRowsStr: tmpviewRowsStr
      };
      console.log("tmp::::::::::::::::::");
      console.log(tmp);
      updateUserCustomView(tmp, "userCustomDTO").then(res => {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        loadData();
      });
    });
  }
  if (hearderData.value.layoutType == "twoRow") {
    if (hearderData.value.oneRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    if (hearderData.value.twoRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    updateRowsWidth(hearderData.value, "rowsWidth").then(res => {
      console.log("保存成功");
      console.log(res);
      let tmpviewIdStr = "";
      let tmpviewRowsStr = "";
      state.modules.group1.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "1:";
      });
      state.modules.group2.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "2:";
      });
      state.modules.group3.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "2:";
      });
      state.modules.group4.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "2:";
      });
      console.log("str::::::::::::::::::");
      console.log(tmpviewIdStr);
      console.log(tmpviewRowsStr);
      let tmp = {
        loginName: hearderData.value.loginName,
        layoutType: hearderData.value.layoutType,
        viewIdStr: tmpviewIdStr,
        customType: hearderData.value.customType,
        viewRowsStr: tmpviewRowsStr
      };
      console.log("tmp::::::::::::::::::");
      console.log(tmp);
      updateUserCustomView(tmp, "userCustomDTO").then(res => {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        loadData();
      });
    });
  }
  if (hearderData.value.layoutType == "threeRow") {
    if (hearderData.value.oneRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    if (hearderData.value.twoRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    if (hearderData.value.threeRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    updateRowsWidth(hearderData.value, "rowsWidth").then(res => {
      console.log("保存成功");
      console.log(res);
      let tmpviewIdStr = "";
      let tmpviewRowsStr = "";
      state.modules.group1.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "1:";
      });
      state.modules.group2.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "2:";
      });
      state.modules.group3.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "3:";
      });
      state.modules.group4.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "3:";
      });
      console.log("str::::::::::::::::::");
      console.log(tmpviewIdStr);
      console.log(tmpviewRowsStr);
      let tmp = {
        loginName: hearderData.value.loginName,
        layoutType: hearderData.value.layoutType,
        viewIdStr: tmpviewIdStr,
        customType: hearderData.value.customType,
        viewRowsStr: tmpviewRowsStr
      };
      console.log("tmp::::::::::::::::::");
      console.log(tmp);
      updateUserCustomView(tmp, "userCustomDTO").then(res => {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        loadData();
      });
    });
  }
  if (hearderData.value.layoutType == "fourRow") {
    if (hearderData.value.oneRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    if (hearderData.value.twoRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    if (hearderData.value.threeRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    if (hearderData.value.fourRows / 100 < 0.2) {
      ElMessageBox.alert("每个视图必须大于20%并且总百分比必须在80-100之间!", "提示信息", {});
      return;
    }
    updateRowsWidth(hearderData.value, "rowsWidth").then(res => {
      console.log("保存成功");
      console.log(res);
      let tmpviewIdStr = "";
      let tmpviewRowsStr = "";
      state.modules.group1.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "1:";
      });
      state.modules.group2.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "2:";
      });
      state.modules.group3.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "3:";
      });
      state.modules.group4.forEach(element => {
        tmpviewIdStr += element.viewCode + ":";
        tmpviewRowsStr += "4:";
      });
      console.log("str::::::::::::::::::");
      console.log(tmpviewIdStr);
      console.log(tmpviewRowsStr);
      let tmp = {
        loginName: hearderData.value.loginName,
        layoutType: hearderData.value.layoutType,
        viewIdStr: tmpviewIdStr,
        customType: hearderData.value.customType,
        viewRowsStr: tmpviewRowsStr
      };
      console.log("tmp::::::::::::::::::");
      console.log(tmp);
      updateUserCustomView(tmp, "userCustomDTO").then(res => {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        loadData();
      });
    });
  }
};

const selIdChange = (data: any) => {
  state.modules.public = [];
  state.modules.public2 = [];
  // let anyViewArray: any[] = [];
  if (data == "static_all") {
    findAllSystemView().then(allRes => {
      let newallRes = JSON.parse(JSON.stringify(allRes));
      for (let i = 0; i < newallRes.length; i++) {
        let add = true;
        state.modules.group1.forEach(item => {
          if (item.viewId == newallRes[i].viewId) {
            console.log("已存在：过滤");
            console.log(item.viewName);
            add = false;
          }
        });
        state.modules.group2.forEach(item => {
          if (item.viewId == newallRes[i].viewId) {
            add = false;
          }
        });
        state.modules.group3.forEach(item => {
          if (item.viewId == newallRes[i].viewId) {
            add = false;
          }
        });
        state.modules.group4.forEach(item => {
          if (item.viewId == newallRes[i].viewId) {
            add = false;
          }
        });
        if (add == true) {
          if (state.modules.public.length > state.modules.public2.length) {
            state.modules.public2.push(newallRes[i]);
          } else {
            state.modules.public.push(newallRes[i]);
          }
        }
      }
    });
  }
  if (data.toString().includes("filter")) {
    let filterCategory = "";
    if (data == "filter_all") {
      filterCategory = "";
    } else if (data == "filter_request") {
      filterCategory = "request";
    } else if (data == "filter_problem") {
      filterCategory = "problem";
    } else if (data == "filter_change") {
      filterCategory = "change";
    } else if (data == "filter_ci") {
      filterCategory = "ci";
    } else if (data == "filter_knowledge") {
      filterCategory = "knowledge";
    }
    findCustomFilter(hearderData.value.loginName, filterCategory).then(res => {
      (res as any).forEach(element => {
        element["viewId"] = element.filterId;
        element["viewName"] = element.filterName;
        element["viewCode"] = "filterView_" + element.filterId;
        let add = true;
        state.modules.group1.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            console.log("已存在：过滤");
            console.log(item.viewName);
            add = false;
          }
        });
        state.modules.group2.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group3.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group4.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        if (add == true) {
          if (state.modules.public.length > state.modules.public2.length) {
            state.modules.public2.push(element);
          } else {
            state.modules.public.push(element);
          }
        }
      });
    });
  }
  if (data == "report_all") {
    findBaseReport().then(res => {
      (res as any).forEach(element => {
        element["viewId"] = element.reportId;
        element["viewName"] = element.reportName;
        element["viewCode"] = "singleView_" + element.reportId;
        let add = true;
        state.modules.group1.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            console.log("已存在：过滤");
            console.log(item.viewName);
            add = false;
          }
        });
        state.modules.group2.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group3.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group4.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        if (add == true) {
          if (state.modules.public.length > state.modules.public2.length) {
            state.modules.public2.push(element);
          } else {
            state.modules.public.push(element);
          }
        }
      });
    });
  } else if (data == "report_singleGroup") {
    sgreportFindPager().then(res => {
      (res.data as any).forEach(element => {
        element["viewId"] = element.reportId;
        element["viewName"] = element.reportName;
        element["viewCode"] = "singleView_" + element.reportId;
        let add = true;
        state.modules.group1.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            console.log("已存在：过滤");
            console.log(item.viewName);
            add = false;
          }
        });
        state.modules.group2.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group3.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group4.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        if (add == true) {
          if (state.modules.public.length > state.modules.public2.length) {
            state.modules.public2.push(element);
          } else {
            state.modules.public.push(element);
          }
        }
      });
    });
  } else if (data == "report_mutilGroup") {
    mutilreportFindPager().then(res => {
      (res.data as any).forEach(element => {
        element["viewId"] = element.reportId;
        element["viewName"] = element.reportName;
        element["viewCode"] = "singleView_" + element.reportId;
        let add = true;
        state.modules.group1.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            console.log("已存在：过滤");
            console.log(item.viewName);
            add = false;
          }
        });
        state.modules.group2.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group3.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group4.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        if (add == true) {
          if (state.modules.public.length > state.modules.public2.length) {
            state.modules.public2.push(element);
          } else {
            state.modules.public.push(element);
          }
        }
      });
    });
  } else if (data == "report_KPI") {
    kpireportFindPager().then(res => {
      (res.data as any).forEach(element => {
        element["viewId"] = element.reportId;
        element["viewName"] = element.reportName;
        element["viewCode"] = "singleView_" + element.reportId;
        let add = true;
        state.modules.group1.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            console.log("已存在：过滤");
            console.log(item.viewName);
            add = false;
          }
        });
        state.modules.group2.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group3.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group4.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        if (add == true) {
          if (state.modules.public.length > state.modules.public2.length) {
            state.modules.public2.push(element);
          } else {
            state.modules.public.push(element);
          }
        }
      });
    });
  } else if (data == "report_cross") {
    crossreportFindPager().then(res => {
      (res.data as any).forEach(element => {
        element["viewId"] = element.reportId;
        element["viewName"] = element.reportName;
        element["viewCode"] = "singleView_" + element.reportId;
        let add = true;
        state.modules.group1.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            console.log("已存在：过滤");
            console.log(item.viewName);
            add = false;
          }
        });
        state.modules.group2.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group3.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        state.modules.group4.forEach(item => {
          if (item.viewCode == element["viewCode"]) {
            add = false;
          }
        });
        if (add == true) {
          if (state.modules.public.length > state.modules.public2.length) {
            state.modules.public2.push(element);
          } else {
            state.modules.public.push(element);
          }
        }
      });
    });
  }

  if (data == "ci_select") {
    let element = {
      viewId: 15,
      viewCode: "ci_CIID",
      viewName: "配置项快捷检索"
    };
    let add = true;
    state.modules.group1.forEach(item => {
      if (item.viewCode == element["viewCode"]) {
        console.log("已存在：过滤");
        console.log(item.viewName);
        add = false;
      }
    });
    state.modules.group2.forEach(item => {
      if (item.viewCode == element["viewCode"]) {
        add = false;
      }
    });
    state.modules.group3.forEach(item => {
      if (item.viewCode == element["viewCode"]) {
        add = false;
      }
    });
    state.modules.group4.forEach(item => {
      if (item.viewCode == element["viewCode"]) {
        add = false;
      }
    });
    if (add == true) {
      if (state.modules.public.length > state.modules.public2.length) {
        state.modules.public2.push(element);
      } else {
        state.modules.public.push(element);
      }
    }
    console.log("ci_select");
  }
};
const layoutTypeChange = (data: any) => {
  // oneRows  twoRows threeRows fourRows
  if (data == "oneRow") {
    hearderData.value.oneRows = 100;
    hearderData.value.twoRows = 0;
    hearderData.value.threeRows = 0;
    hearderData.value.fourRows = 0;
  }
  if (data == "twoRow") {
    hearderData.value.oneRows = 49;
    hearderData.value.twoRows = 49;
    hearderData.value.threeRows = 0;
    hearderData.value.fourRows = 0;
  }
  if (data == "threeRow") {
    hearderData.value.oneRows = 33;
    hearderData.value.twoRows = 33;
    hearderData.value.threeRows = 33;
    hearderData.value.fourRows = 0;
  }
  if (data == "fourRow") {
    hearderData.value.oneRows = 24;
    hearderData.value.twoRows = 24;
    hearderData.value.threeRows = 24;
    hearderData.value.fourRows = 24;
  }
  residue.value = 0;
  console.log(data);
};
const hearderData = ref({
  customType: "",
  loginName: "",
  layoutType: "",
  oneRows: 0,
  twoRows: 0,
  threeRows: 0,
  fourRows: 0,
  selId: "static_all"
});
const data = ref({});
const state = reactive({
  /*工作台的数据结构
    disabledMove:禁止移动
    disabledPark:禁止停靠
  */
  modules: {
    group1: [
      // { name: "消息", id: 1, disabledMove: false, disabledPark: false },
      // { name: "库存", id: 2, disabledMove: false, disabledPark: false },
      // { name: "销量", id: 3, disabledMove: false, disabledPark: false },
      // { name: "日志", id: 4, disabledMove: false, disabledPark: false },
    ] as any[],
    group2: [
      // { name: "订单", id: 5, disabledMove: false, disabledPark: false },
      // { name: "员工", id: 6, disabledMove: false, disabledPark: false },
      // { name: "报表", id: 7, disabledMove: false, disabledPark: false },
    ] as any[],
    group3: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    group4: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    public: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[],
    public2: [
      // { name: "系统", id: 8, disabledMove: false, disabledPark: false },
      // { name: "审核", id: 9, disabledMove: false, disabledPark: false },
    ] as any[]
  }
});

//删除元素
const deleteObj = (element, groupName) => {
  console.log(state.modules.group1);
  for (let i = 0; i < state.modules[groupName].length; i++) {
    if (state.modules[groupName][i].viewId == element.viewId) {
      state.modules[groupName].splice(i, 1);
      if (state.modules.public.length > state.modules.public2.length) {
        state.modules.public2.push(element);
      } else {
        state.modules.public.push(element);
      }
    }
  }
};
//拖拽开始的事件
const onStart = () => {
  console.log("开始拖拽");
};

//拖拽结束的事件
const onEnd = () => {
  console.log("结束拖拽");
  console.log(state);
};

const onMove = (e, originalEvent) => {
  console.log();
  //不允许停靠
  //if (e.relatedContext.element.disabledPark == true) return false;

  return true;
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
  background-color: #f1f1f1;
}
.itxst {
  display: flex;
  place-content: space-around space-between;
  padding: 2px;
  background-color: #f1f1f1;
}
.group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* align-content: center; */
  width: 20%;
}
.item {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  padding: 0;
  margin-bottom: 10px;
  text-align: left;
  user-select: none;
  background-color: #ffffff;
  border: solid 1px #dddddd;
}
.item > label {
  padding: 6px 10px;
  color: #333333;
  border-bottom: solid 1px #dddddd;
}
.item > label:hover {
  cursor: move;
}
.item > p {
  padding: 6px 10px;
  color: #666666;
}
.ghost {
  border: solid 1px rgb(19 41 239) !important;
}
.chosenClass {
  border: solid 1px red;
  opacity: 1;
}
.fallbackClass {
  background-color: aquamarine;
}
.row-border {
  border: 1px solid #d3dce6; /* 边框颜色和宽度 */
  border-radius: 4px; /* 可选：圆角 */
}
.red-text {
  color: red;
}
</style>
